<template>
  <el-cascader
    ref="address"
    v-model="value"
    placeholder="请选择地址"
    size="medium"
    :options="addressJSON"
    :props="{ checkStrictly: true, expandTrigger: 'hover' }"
    :disabled="disabled"
    filterable
    clearable
    :style="'width: '+ (width || '100%')"
    @visible-change="change"
  />
</template>

<script>
const addressJSON2 = require('@/utils/areas.json')
export default {
  props: {
    value: {
      type: Array,
      default: function() {
        return []
      }
    },
    width: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 1 // 1: 不带ID; 2: 带ID
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addressJSON: []
    }
  },
  created() {
    this.foramtAddress()
  },
  methods: {
    /**
     * 格式化地址
    */
    foramtAddress() {
      this.addressJSON = Object.keys(addressJSON2).map(provice => {
        return {
          value: provice,
          label: provice,
          children: Object.keys(addressJSON2[provice]).map(city => {
            return {
              value: city,
              label: city,
              children: addressJSON2[provice][city].map(dict => {
                return {
                  value: dict,
                  label: dict
                }
              })
            }
          })
        }
      })
    },
    change(flag) {
      if (!flag) {
        const labels = this.$refs['address'].inputValue.split(/\s\/\s/g)
        const codes = this.$refs['address'].checkedValue
        if (this.type === 2) {
          this.$emit('change', labels, codes)
        } else {
          this.$emit('change', codes)
        }
      }
    }
  }
}
</script>

<style lang="scss" >
// .el-cascader-panel .el-radio {
//     width: 100%;
//     height: 100%;
//     z-index: 10;
//     position: absolute;
//     top: 10px;
//     right: 10px;
//   }

//   .el-cascader-panel .el-radio__input {
//     visibility: hidden;
//   }
</style>
